<template>
	<view class="coupon">
		<movable-area class="go-home">
			<movable-view direction="all" class="go-home-img">
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/enter-course.png" @click="goCourse"></image>
			</movable-view>
		</movable-area>
		<view class="coupon-list">
			<view class="coupon-item" v-for="(data,index) in list" :key="index">
				<view class="coupon-item-left">
					<view class="coupon-price" v-if="data.type==1">￥<text>{{data.money}}</text></view>
					<view class="coupon-price" v-if="data.type==2"><text>{{data.discount}}</text>折</view>
					<view class="coupon-des" v-if="data.type==1">满{{data.satisfy_money}}可用</view>
				</view>
				<view class="coupon-item-center">
					<view class="coupon-name">{{data.coupon_name}}</view>
					<view class="coupon-time">有效期：{{$timeFormat(data.stop_time,'yyyy-mm-dd')}}</view>
				</view>
				<view class="coupon-item-right" @click="goAuth(data.coupon_id)"><text>去授权</text></view>
				<view class="coupon-item-right del" @click="delCoupon(data.coupon_id)"><text>删除</text></view>
			</view>
		</view>
		<loading v-if="loading"></loading>
		<no-more text="没有更多了" v-if="noMore && list.length"></no-more>
		<nothing text="暂无优惠券" btnTxt="添加优惠券"  v-if="noMore && !list.length" @goUrl="addCoupon"></nothing>
		<view class="coupon-btn" v-if="list.length"><view class="btn" @click="addCoupon"><text>+</text>添加优惠券</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				noMore: false,
				list: [],
				form: {
					style: 5,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					use_type: 1,
					page: 0
				}
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.list = []
			this.noMore = false
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.form.page++
				this.loading = true
				this.init()
			}
		},
		methods: {
			init(){
				this.$api.CardList(this.form).then(res => {
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				}).then(() => {
					this.AddFoot('商家-优惠券-列表')
				})
			},
			addCoupon(){
				uni.navigateTo({
					url: '/pages/coupon/add-coupon',
					success: () => {
						this.AddFoot('商家-优惠券-添加')
					}
				})
			},
			goAuth(coupon_id){
				uni.navigateTo({
					url: '/pages/coupon/coupon-auth?coupon_id='+coupon_id,
					success: () => {
						this.AddFoot('商家-优惠券-授权-列表')
					}
				})
			},
			AddFoot(where){
				this.$api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					client: 2,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			},
			delCoupon(coupon_id){
				uni.showModal({
					title: '温馨提示',
					content: '删除后不可恢复，是否确认删除?',
					success: (confirm) => {
						if(confirm.confirm){
							this.$api.CouponOut({status: 2,coupon_id: coupon_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									success: () => {
										this.form.page = 0
										this.list = []
										this.noMore = false
										this.init()
									}
								})
							})
						}
					}
				})
			},
			goCourse(){
				uni.navigateTo({
					url: '/pages/growing/growing-info?type=14'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 120rpx;
	}
	.coupon-list{
		padding: 30rpx;
		.coupon-item{
			display: flex;
			background-color: #FFF;
			margin-bottom: 40rpx;
			border-radius: 8rpx;
			overflow: hidden;
			&:last-child{
				margin-bottom: 0;
			}
			.coupon-item-left{
				width: 180rpx;
				height: 150rpx;
				background-color: #2073F5;
				color: #FFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.coupon-price{
					margin-bottom: 10rpx;
					text{
						font-size: 42rpx;
					}
				}
				.coupon-des{
					font-size: 20rpx;
				}
				&::before{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					bottom: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
				&::after{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					top: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
			}
			.coupon-item-center{
				border-right: dashed 2rpx #E6E6E6;
				flex: 1;
				min-width: 0;
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.coupon-name{
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}
				.coupon-time{
					color: #999;
					font-size: 24rpx;
				}
			}
			.coupon-item-right{
				padding: 0 20rpx;
				width: 80rpx;
				text-align: center;
				color: #2073F5;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				&.del{
					color: red;
					border-left: dashed 2rpx #E6E6E6;
				}
			}
		}
	}
	.coupon-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		padding: 15rpx 75rpx 0;
		height: 120rpx;
		.btn{
			display: block;
			height: 90rpx;
			background-color: #F7F7FA;
			font-size: 32rpx;
			color: #2073F5;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 50rpx;
				color: #2073F5;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
	}
	.go-home{
		position: fixed !important;
		left: 0;
		top: 10rpx;
		bottom: 140rpx;
		left: 5px;
		right: 5px;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.go-home-img,.go-brand-info{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.go-brand-info{
			margin-bottom: 90rpx;
		}
	}
</style>
